<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Earth API Sample</title>
    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
      }

      #map3d {
        height: 410px;
      }
    </style>

    <script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>

    <script src="http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/dist/extensions.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
      function addSampleButton(caption, clickHandler) {
        var btn = document.createElement('input');
        btn.type = 'button';
        btn.value = caption;

        if (btn.attachEvent)
          btn.attachEvent('onclick', clickHandler);
        else
          btn.addEventListener('click', clickHandler, false);

        // add the button to the Sample UI
        document.getElementById('sample-ui').appendChild(btn);
      }

      function addSampleUIHtml(html) {
        document.getElementById('sample-ui').innerHTML += html;
      }
    </script>
    <script type="text/javascript">
    //Demonstrating access to Historical Imagery
    //set some global variables
    var ge;
    var gex;
    var layerRoot;
    google.load("earth", "1");

    function initCallback(instance) {
      base_setup(instance);
      addSampleButton('Jump to SF', function() {
        var la = ge.createLookAt('');
        la.set(37.7792,-122.4210, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 3500 );
        ge.getView().setAbstractView(la);
      });

      addSampleButton('Borders', function() {
        var layer = layerRoot.getLayerById(ge.LAYER_BORDERS);
        layerRoot.enableLayerById(layer.getId(),!(layer.getVisibility()));
      });

      addSampleButton('Roads', function() {
        var layer = layerRoot.getLayerById(ge.LAYER_ROADS);
        layerRoot.enableLayerById(layer.getId(),!(layer.getVisibility()));
      });

      addSampleButton('Terrain', function() {
        var layer = layerRoot.getLayerById(ge.LAYER_TERRAIN);
        layerRoot.enableLayerById(layer.getId(),!(layer.getVisibility()));
      });

      addSampleButton('Buildings', function() {
        var layer = layerRoot.getLayerById(ge.LAYER_BUILDINGS);
        layerRoot.enableLayerById(layer.getId(),!(layer.getVisibility()));
      });

      addSampleButton('Trees', function() {
        var layer = layerRoot.getLayerById(ge.LAYER_TREES);
        layerRoot.enableLayerById(layer.getId(),!(layer.getVisibility()));
      });

      addSampleButton('Street View', function() {
         ge.getNavigationControl().setStreetViewEnabled(!ge.getNavigationControl().getStreetViewEnabled());
      });

      addSampleButton('Stree View, Moscone', function() {
        var la = ge.createLookAt('');
        la.setLatitude(37.78325);
        la.setLongitude(-122.40270);
        la.setHeading(-106);
        la.setTilt(85);
        la.setRange(13);
        var vo = ge.createViewerOptions('');
        vo.setOption(ge.OPTION_STREET_VIEW, ge.OPTION_STATE_ENABLED);
        la.setViewerOptions(vo);
        ge.getView().setAbstractView(la);
      });

    }

    function base_setup(instance){
      ge = instance;
      ge.getWindow().setVisibility(true);
      gex = new GEarthExtensions(ge);
      layerRoot = ge.getLayerRoot();

      // add a navigation control
      ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
      ge.getNavigationControl().setStreetViewEnabled(true);

//      // add some layers
//      ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
//      ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, false);
//      ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, false);
//      ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, false);
//      ge.getLayerRoot().enableLayerById(ge.LAYER_TREES, false);

    }

    function init() {
      google.earth.createInstance('map3d', initCallback, failureCallback);
    }

    function failureCallback(errorCode) {}

    </script>
  </head>
  <body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
    <div id="sample-ui"></div>
    <div id="map3d"></div>
    <!--<br>-->
    <!--<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>-->
  </body>
</html>
​